<template>
	<view class="pay">
		<view class="m-title-con">
			<view class="money">
				<view class="balance">
					<text class="text1">￥{{balance || '0.00'}}</text>
					<text class="text3">账户余额</text>
				</view>
				<view class="text" @click="rebate">
					申请退款
				</view>
			</view>
			<view class="dins">
				<view class="box">
				</view>
			</view>
		</view>
		<view class="pay-mian" >
			<uni-data-checkbox mode="tag" v-model="value" :localdata="money" @change="onChange"></uni-data-checkbox>
			<view class="custom" >
				<uni-easyinput :clearable="false" type="number" class="input" :inputBorder="false" trim="all" v-model="value"
					placeholder="自定义金额"></uni-easyinput>
			</view>
		</view>
		<view class="floor">
			<button class="but" plain @click="payLog">充值记录
				<uni-icons type="right" color="#000000" size="30r" />
			</button>
			<button class="but" plain @click="rebateLog">退款记录
				<uni-icons type="right" color="#000000" size="30r" />
			</button>
		</view>
		<view class="pay-but">
			<button class="but" plain @click="payGo">立即充值</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				url: '/hotelAdmin/my/pay',
				url1: '/hotelAdmin/my/common',
				balance:0, // 账户余额 
				value: '',
				money: [{
						text: '200元',
						value: 200
					},
					{
						text: '300元',
						value: 300
					},
					{
						text: '500元',
						value: 500
					},
					{
						text: '800元',
						value: 800
					},
					{
						text: '1000元',
						value: 1000
					},
					{
						text: '2000元',
						value: 2000
					}
				],
				hotel_id: ''
			}
		},
		onLoad(options) {
			this.hotel_id = options.hotel_id
			this.getClick()
		},
		onShow() {
		},
		methods: {
			/**
			 * 申请退款按钮
			 */
			rebate() {
				if(this.balance != 0) {
					uni.navigateTo({
						url: '/hotelAdmin/my/common/rebate/rebate?id=' + 1 +'&price=' + this.balance + "&hotel_id=" + this.hotel_id
					})
					// uni.navigateTo({
					// 	url: `${this.url1}/${path}/${path}?id=1&price=${this.balance}`,
					// });
				}else {
					uni.showToast({
						title: '余额不足',
						icon: 'none',
					});
				}
				
			},
			/**
			 * 退款记录按钮
			 */
			rebateLog() {
				// uni.showToast({
				// 	title: '退款记录',
				// 	icon: 'none',
				// });
				uni.navigateTo({
					url: '/hotelAdmin/my/pay/rebate-log/rebate-log?hotel_id=' + this.hotel_id,
				});
			},
			/**
			 * 充值记录按钮
			 */
			payLog() {
				uni.navigateTo({
					url: '/hotelAdmin/my/pay/pay-log/pay-log?hotel_id=' + this.hotel_id,
				});
			},
			onChange(e) {
			},
			/**
			 * 立即充值按钮
			 */
			payGo: async function() {
				let _this = this
				if( this.value) {
					uni.showToast({
						title: '立即充值',
						icon: 'none',
					});
					
					try {
						uni.showLoading({ title: '充值中....' })
							let res = await this.$http.post('/index/Hotelrecharge/recharge_order',{price:_this.value,hotel_id:_this.hotel_id})
							let rep = await this.$http.post('/index/Hotelrecharge/recharge_order_pay',{order_id:res,openid:uni.getStorageSync('hotelData').openid})
							let pay = await uni.requestPayment({
							    provider: 'wxpay',
							    timeStamp: rep.timeStamp,
							    nonceStr: rep.nonceStr,
							    package: rep.package,
							    signType: rep.signType,
							    paySign: rep.paySign,
							});
							if(pay[0]  && pay[0].errMsg == "requestPayment:fail cancel") uni.showToast({
								title: '取消支付',
								icon: 'none',
							});
							else if(pay[1] && pay[1].errMsg == "requestPayment:ok") {
								uni.showToast({
									title: '支付成功',
									icon: 'none',
								});
							this.getClick()
							}
							this.value = ''
							uni.hideLoading()
						// 返回到列表页
						// uni.navigateBack({
						//     delta: 1
						// });
					}catch (e) {
						uni.showToast({
							title:e.errMsg,
							icon:"none"
						})
					}
				}else {
					uni.showToast({
						title: '请输入充值金额',
						icon: 'none',
					});
				}
				
			},
			/**
			 * 请求数据
			 */
			getClick() {
				const params = {
					hotel_id: this.hotel_id
				}
				this.$http.post('/index/Hotelpersonal/hotelinfo', params).then(res => {
					this.balance = res.balance
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
			}
		},
	}
</script>

<style lang="scss">
	.pay {
		position: relative;
		box-sizing: border-box;
		padding: 20rpx 0;
		height: 100vh;

		.m-title-con {
			position: relative;
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.money {
				position: relative;
				z-index: 1;
				bottom: 9rpx;

				.balance {
					flex: 1;
					display: flex;
					height: 150rpx;
					flex-direction: column;
					justify-content: center;
					background-color: #ffffff;
					border-radius: 20rpx 20rpx 0 0;
					padding: 0 32rpx;
					z-index: 2;
					color: #000000;

					.text1 {
						font-size: 30rpx;
						margin-bottom: 10rpx;
						font-weight: 600;

						.text2 {
							font-size: 40rpx;
						}
					}

					.text3 {
						font-size: 24rpx;
						color: rgba($color: #000000, $alpha: 0.7);
					}
				}

				.text {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 188rpx;
					height: 68rpx;
					background: linear-gradient(-90deg, #FEAD1D, #FFCD5C);
					border-radius: 34rpx 0px 0px 34rpx;
					font-size: 28rpx;
					color: #ffffff;
					text-align: center;
					line-height: 68rpx;
				}
			}

			.dins {
				position: absolute;
				left: 0;
				bottom: 0;
				box-sizing: border-box;
				height: 18rpx;
				width: 100%;
				padding: 0 15rpx;
				z-index: 0;

				.box {
					height: 100%;
					width: 100%;
					background: linear-gradient(-90deg, #15AC66, #2CCD7F);
					border-radius: 9rpx;
				}
			}
		}

		.pay-mian {
			margin-bottom: 20rpx;

			.uni-data-checklist {
				.checklist-group {
					justify-content: space-between;
					margin: 0 20rpx;

					.checklist-box {
						border: 0;
						border-radius: 20rpx;
						width: 218rpx;
						height: 134rpx;
						background-color: #FFFFFF !important;
						padding: 0;
						margin: 0;
						margin-bottom: 20rpx;
					}

					.is-checked {
						border: 0;
						background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					}

					.checklist-content {
						justify-content: center;

						.checklist-text {
							font-size: 40rpx;
							font-weight: normal;
						}
					}
				}
			}

			.custom {
				background-color: #ffffff;
				margin: 0 20rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.uni-easyinput__content-input {
					text-align: center;
				}
			}
		}

		.floor {
			background-color: #FFFFFF;
			margin: 0 20rpx;
			border-radius: 20rpx;
			overflow: hidden;

			.but {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 0;
				font-weight: 500;
				color: #000000;
				font-size: 28rpx;
				padding: 4rpx 40rpx;
			}
		}

		.pay-but {
			position: absolute;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			height: 80rpx;

			.but {
				color: #FFFFFF;
				background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
				border-radius: 40rpx;
				line-height: 80rpx;
				border: 0;
				margin: 0 20rpx;
			}
		}
	}
</style>
